<template>
	<div id="menu-list-home">
		<a @click="enterIndex" id="association" class="bottom-menu-a bottom-menu-active">
			<img class="bottom-menu-icon" 
			:src="site === 'index' ? 'https://www.mrobiji.com/images/menu-association-blue-icon.svg' : 'https://www.mrobiji.com/images/menu-association-gray-icon.svg'">
			<span class="text">社群</span>
		</a>
		<a @click="enterMemberList" id="member" class="bottom-menu-a">
			<img class="bottom-menu-icon" src="https://www.mrobiji.com/images/member-list-gray-icon.svg" loading="lazy">
			<span class="text">人员</span>
		</a>
		<a @click="enterAct" id="add" class="bottom-menu-a bottom-add-menu-a">
			<span class="bottom-add-menu-a-span"></span>
			<img class="bg-img" src="https://www.mrobiji.com/images/lottery-white-icon.svg">
            <div class="bottom-add-menu-div">活动</div>
		</a>
		<a @click="busCard" id="integral-list" class="bottom-menu-a">
			<img class="bottom-menu-icon" src="https://www.mrobiji.com/images/manu-card-gray-icon.svg">
			<span class="text">名片</span>
		</a>
		<a 
		id="me" 
		class="bottom-menu-a"
		:class="site === 'Profile' ? 'active' : ''"
		>
			<i class="iconfont icon-renyuan btn-menu-a-icon-detail"></i>
			<span class="text">我的</span>
		</a>
	</div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'

import { enterBusMemberList, toIndex, enterUserBus, enterUserSet  } from '_projectFn/page'
import { getUserAmount } from "_network/request"
import { isLoginChose } from "_projectFn/login" 
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"
import { getCookie } from '_commonFn/cookie.js'

Vue.use(Icon)

import '_assets/fonts/iconfont.css'

export default {
	name: 'MenuListHome',
	props: {
		site: {
			type: String,
			default: ''
		},
	},
	methods: {
		enterIndex() {
			toIndex({})
		},
		enterMemberList() {
			enterBusMemberList()
		},
		// 进入活动页面
		enterAct() {
			if (process.env.IS_LOCAL) {
				console.log('未开发活动页面')
			} else {
				window.location.href = '../free-mask.html'
			}
		},
		// 点击名片
		busCard() {
			if (isLoginChose()) {
				loadingVantToa({})
				getUserAmount()
				.then(res => {
					console.log("获取账户信息 res：", res)
					if (res.errcode == 1000) {
						if (res.data.IsBusiness == 1) { // 进入业务详情
							enterUserBus({
								userId: getCookie('UserId')
							})
						} else { // 进入编辑业务名片
							enterUserSet('business')
						}
						clearVantToa()
					} else {
						failTextVantToa(res.message)
					}
				}, res => {
					console.log("fail: res", res)
					if (res.errcode != 2000) {
						failTextVantToa("服务器正在修整，请稍后")
					}
				})
				.catch(res => {
					console.log("catch：res", res)
					failTextVantToa("服务器正在修整，请稍后")
				})
			}
		},
	}
}
</script>

<style lang="scss" scoped>
#menu-list-home {
	width: 100%;
    height: 50px;
    background: white;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    border-top: 1px solid #dbdbdb;
    justify-content: space-around;
    font-size: 12px;

	.bottom-menu-a {
		width: 20%;
		height: 100%;
		display: flex;
		color: #a59090;
		text-align: center;
		position: relative;
		z-index: auto;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.bottom-menu-icon {
			height: 18px;
    		width: 18px;
		}

		.btn-menu-a-icon-detail {
			height: 18px;
    		width: 18px;
		}

		.text {
			margin-bottom: 2px;
		}

		.bottom-add-menu-a-span {
			display: flex;
			width: 40px;
			height: 40px;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: -15px;
			left: 50%;
			margin-left: -20px;
			// border: 1px solid #eaeaea;
			border-radius: 50%;
			background: white;
			box-shadow: 0px 0px 3px 1px #e4e4e4;

			&::before {
				content: '';
				width: 35px;
				height: 35px;
				// background: url(https://www.mrobiji.com/images/lottery-white-icon.svg) no-repeat;
				background: red;
				background-size: 100% 100%;
				border-radius: 50%;
			}

			.add-icon {
				font-size: 30px;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.bottom-add-menu-div {
			margin-top: 20px;
		}

		.bg-img {
			width: 22px;
			height: 22px;
			position: absolute;
			// left: 26px;
			top: -6px;
		}
	}	

	.active {
		color: #0077bf;
	}
}
</style>